<template>
  <el-row class="wh" type="flex" justify="space-between">
      <Passenger v-if="orderDetail" :orderData="orderDetail" @loadPassengerData="getPassengerData"/>
      <Invoice v-if="orderDetail" :orderData="orderDetail" :totalPrice="total" :personNum="personNum"/>
  </el-row>
</template>

<script>
import Passenger from '@/components/ticket/Passenger'
import Invoice from '@/components/ticket/Invoice'
export default {
  data(){
    return{
      // 这里给null
       orderDetail:null,
       total:0,
       personNum:0
    }
  },
  components:{
    Invoice,
    Passenger
  },
  methods:{
    loadOrder(){
        let id = this.$route.query.id;
        let seat_xid = this.$route.query.seat_xid;
        this.$axios({
            url:'/airs/'+id,
            params:{seat_xid:seat_xid}
        }).then(res => {
            this.orderDetail = res.data;
        })
    },
    getPassengerData(total,personNum){
      this.total = total;
      this.personNum = personNum;
    }
  },
  mounted(){
      this.loadOrder();
  }
}
</script>

<style lang="less" scoped>
.wh{
   width:1000px;
   margin:20px auto;
}
</style>